import { Component } from 'react';
import { View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { getServiceCateList } from '@/service/apis/service/index';
import ServiceCateItem from '../components/ServiceCateItem/index';
import './index.scss';

export default class Index extends Component {
  state = {
    list: [],
  };
  componentDidMount = async () => {
    this.getCateList();
  };

  onHandle = (serviceCate: any) => {
    console.log('serviceCate: ', serviceCate);
    Taro.navigateTo({
      url: '/subPages/service/search/index?id=' + serviceCate.id,
    });
  };

  getCateList = async () => {
    try {
      const { data } = await getServiceCateList();
      this.setState({
        list: data.services_category,
      });
    } catch (err) {
      Taro.showToast({
        title: err?.message,
        icon: 'none',
      });
    }
  };

  render() {
    const { list } = this.state;
    return (
      <View className="serviceCate-container">
        <View className="serviceCate-list">
          {list.map((serviceCate, key) => {
            return <ServiceCateItem key={key} index={key} serviceCate={serviceCate} onHandle={() => this.onHandle(serviceCate)} />;
          })}
        </View>
      </View>
    );
  }
}
